<?php get_header(); ?>
<main role="main" class="">
    <?php while (have_posts()) : the_post(); ?>
        <section id="breadcrumbs" class="breadcrumbs">
            <?php $categorys = get_the_category(); ?>
            <div class="container py-3">
                <div class="py-lg-5 d-flex flex-column justify-content-center align-items-center">
                    <h1><?php the_title(); ?></h1>
                    <ol>
                        <li><a href="<?php home_url('/'); ?>">home page</a></li>
                        <?php if ($categorys) : ?>
                            <?php foreach ($categorys as $key => $category) : ?>
                                <li><a href="<?php echo get_term_link($category->term_id); ?>"><?php echo $category->name; ?></a></li>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </ol>
                </div>
            </div>
        </section>

        <div class="container my-5">
            <div class="row mb-3">
                <div class="col-md-3 d-none d-sm-block">
                    <div class="sidebar-service bg-customer py-3 px-1 px-lg-3 mb-3 wow fadeInUp">
                        <div class="section-title-page">
                            <h4 class="text-white">Product Category</h4>
                        </div>
                        <nav class="sidebar-service-nav navbar">
                            <ul id="menu-service" class="bg-white rounded-3 ps-lg-3 pe-lg-3 navbar-nav">
                                <?php
                                $args = [
                                    'taxonomy' => 'product_cat',
                                    'hide_empty' => true,
                                    'parent' => 0,
                                ];
                                $product_cats = get_terms($args);
                                ?>
                                <?php if ($product_cats) : ?>
                                    <?php foreach ($product_cats as $product_cat) : ?>
                                        <li id="menu-item-<?php echo $product_cat->term_id; ?>" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-<?php echo $product_cat->term_id; ?>">
                                            <a href="<?php echo get_term_link($product_cat->term_id); ?>" aria-current="page"><?php echo $product_cat->name; ?></a>
                                        </li>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </ul>
                        </nav>

                    </div>
                </div>
                <!-- col-md-3 -->
                <div class="col-md-9">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <?php the_post_thumbnail('shop_single', ['class' => 'img-fluid']); ?>
                        </div>
                        <!-- col-md-6 -->
                        <div class="col-md-6">
                            <h4><?php the_title(); ?></h4>
                            <p class="text-muted"><?php the_excerpt(); ?></p>
                            <p class="my-4">
                                <a href="" target="_blank" class="btn btn-warning">Send Inquiry</a>
                                <a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#weixin-Modal">Chat Now</a>
                            </p>
                        </div>
                        <!-- col-md-6 -->
                    </div>
                    <!-- row -->
                    <div class="row">
                        <div class="col-md-12 product-tab mt-3">
                            <nav>
                                <div class="nav nav-tabs d-flex justify-content-start" id="nav-tab" role="tablist">
                                    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Product Introduction</button>
                                    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false" tabindex="-1">Message Inquiry</button>
                                </div>
                            </nav>
                            <div class="tab-content py-4" id="nav-tabContent">
                                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
                                    <?php the_content(); ?>
                                </div>
                                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
                                    <div class="wpcf7 js" id="wpcf7-f112-o1" lang="zh-CN" dir="ltr">
                                        <div class="screen-reader-response">
                                            <p role="status" aria-live="polite" aria-atomic="true"></p>
                                            <ul></ul>
                                        </div>
                                        <!-- 留言咨询区 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- col-md-12 -->
                    </div>
                    <!-- row -->
                </div>
                <!-- col-md-9 -->
            </div>
            <!-- row -->
        </div>
        <!-- container -->
        <div class="container">


            <div class="row">
                <div class="text-center">
                    <div class="section-title-two">
                        <h3 class="title text-dark fw-bold">Related Products</h3>
                        <p class="text-muted">Product List</p>
                    </div>

                </div>
            </div>
            <div class="row my-5">
                <div class="owl-carousel owl-carousel-service owl-loaded owl-drag">
                    <div class="owl-stage-outer">
                        <div class="owl-stage">
                            <?php $query = new WP_Query(array('post_type' => 'product', 'posts_per_page' => 10)); ?>
                            <?php while ($query->have_posts()) : $query->the_post(); ?>
                                <div class="owl-item">
                                    <div class="ocs-item">
                                        <div class="bg-light-customer effect-imghover">
                                            <a href="<?php the_permalink(); ?>">
                                                <?php the_post_thumbnail('shop_thumbnail', ['class' => 'img-fluid', 'alt' => get_the_title()]); ?>
                                            </a>
                                            <div class="p-3">
                                                <h6 class="mt-1 text-center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                            <?php wp_reset_postdata(); ?>
                        </div>
                    </div>
                    <div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"><span aria-label="Previous">‹</span></button><button type="button" role="presentation" class="owl-next"><span aria-label="Next">›</span></button></div>
                    <div class="owl-dots"><button role="button" class="owl-dot"><span></span></button><button role="button" class="owl-dot"><span></span></button><button role="button" class="owl-dot"><span></span></button><button role="button" class="owl-dot"><span></span></button><button role="button" class="owl-dot"><span></span></button><button role="button" class="owl-dot active"><span></span></button></div>
                </div>
            </div>
            <!-- row -->
        </div>
    <?php endwhile; ?>
</main>
<?php get_footer(); ?>